<template>
  <div>
<!--    这一页因为翻译问题看不懂改哪里留存以后再改-->
    <el-form ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item :label="$t('TabRestart_RestartStrategy')" prop="isSynchronize">
        <button @click.prevent="changeActive('no')" :class="Restart === 'no' ? 'btnActive' : ''" class="btn btn1">never</button>
        <button @click.prevent="changeActive('always')" :class="Restart === 'always' ? 'btnActive' : ''" class="btn">always</button>
        <button @click.prevent="changeActive('on-failure')" :class="Restart === 'on-failure' ? 'btnActive' : ''" class="btn">on-failure</button>
        <button @click.prevent="changeActive('unless-stopped')" :class="Restart === 'unless-stopped' ? 'btnActive' : ''" class="btn btn4">unless-stopped</button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      Restart: 'no'
    }
  },
  watch: {
    // 监听vuex中是isupload是否变化为true，true则上传本组件的数据。
    '$store.state.isUpload': function () {
      if (this.$store.state.isUpload) {
        this.$store.commit('changeCrateData', ['Restart', this.Restart])
      }
    }
  },
  methods: {
    changeActive (str) {
      this.Restart = str
    }
  }
}
</script>

<style lang="scss" scoped>
.btn{
  padding: 10px;
  background: #067FB5;
  font-size: 12px;
  color: #fff;
}
.btnActive{
  background: #286090;
}
.btn1{
  border-radius: 5px 0px 0px 5px;
}
.btn4{
  border-radius: 0px 5px 5px 0px;
}
</style>
